<template>
	<h3>奶茶DIY生成器</h3>
     <h4>选择奶茶的基底</h4>
	 <div v-for="(base,index) in state.bases" :key="index">
		 <input type="radio" name='jd' v-model="state.selectbase"  :value="base.name" />{{base.name}}
	 </div>
	 <h4>选择奶茶的小料</h4>
	 <select v-model="state.selecttopping">
		 <option v-for="(topping,index) in state.toppings" :key="index" :value="topping.name">{{topping.name}}</option>
	 </select>
	 <br>
	<button>点击生成</button>
	<p>您选择的奶茶是： {{state.selectbase}}+{{state.selecttopping}}奶茶</p>
	<p>价格是：</p>
</template>

<script setup>
	import { reactive } from 'vue';
	//1.选择奶茶的基底，单选框选择
	//2.选择奶茶的小料，下拉框
	//3.点击按钮算出奶茶的价格，按钮
	//4.定义基底、小料、价格的变量
	//5.最终显示出选择的奶茶，
	//定义对象
	const state=reactive({
		bases:[
			{id:1,name:'厚椰乳',price:3},
			{id:2,name:'水果茶',price:4},
			{id:3,name:'乌龙茶',price:3},
		],//基底
		toppings:[
			{id:1,name:'珍珠',price:3},
			{id:2,name:'芋圆',price:2},
			{id:3,name:'水果',price:5},
		],//小料
		selectbase:null,//选择的基底
		selecttopping:null,//选择的小料
		totalprice:0 //总价
	})
	
</script>

<style>
</style>